<template>
    <div class="bbox">
        <div class="head">
            <span class="iconfont icon-arrow-left-bold" @click="gotoUp"></span>
            <div class="title">个人中心</div>
        </div>
        <div class="headportrait">
            <div class="value">
                <img :src="list.avatar" alt="" />
                <input @change="headleChange" type="file" accept="image/*" />
            </div>
            <div class="name">点击更换头像</div>
        </div>
        <div class="form-box">
            <div class="tit">账户信息</div>
            <div class="group-item">
                <div class="name">昵称</div>
                <div class="value">
                    <span @click.stop="changenickname">{{ list.nick_name }}</span>
                    <span class="iconfont icon-arrow-right-bold"></span>
                </div>
            </div>
            <div class="group-item">
                <div class="name">绑定手机号</div>
                <div class="value">
                    <span>{{ mobile }}</span>
                    <span class="iconfont icon-arrow-right-bold"></span>
                </div>
            </div>
            <div class="group-item">
                <div class="name">修改密码</div>
                <div class="value">
                    <span>设置密码</span>
                    <span class="iconfont icon-arrow-right-bold"></span>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { Toast } from "vant";
export default {
    data() {
        return {
            list: {},
            mobile: "",
            arr: "",
        };
    },
    methods: {
        gotoUp() {
            this.$router.go(-1);
        },
        headleChange(e) {
            let formData = new FormData();
            formData.append("file", e.target.files[0]);
            this.$request.post("/api/v2/member/detail/avatar", formData);
            this.$router.go(0);
        },
        changenickname() {
            Toast.fail("您已经设置过昵称了哦");
        },
    },
    async created() {
        let res = await this.$request.get("/api/v2/member/detail", {
            params: {},
        });
        this.list = res.data;
        this.mobile = this.list.mobile.replace(/(\d{3})\d{4}(\d{4})/, "$1****$2");
    },
};
</script>

<style lang="less" scoped>
.head {
    position: fixed;
    top: 0;
    width: 100%;
    height: 50px;
    background-color: #fff;
    z-index: 100;
    padding-left: 15px;
    padding-right: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid #f1f2f6;
    span {
        font-size: 19px;
        position: absolute;
        top: 50%;
        margin-top: -10px;
        left: 4%;
    }
    .title {
        flex: 1;
        font-size: 17px;
        font-weight: 500;
        text-align: center;
        color: #333;
        line-height: 22px;
        overflow: hidden;
    }
}
.headportrait {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 80px;
    margin-bottom: 50px;
    .value {
        width: 64px;
        height: 64px;
        position: relative;
        img {
            width: 64px;
            height: 64px;
            border-radius: 50%;
        }
        input {
            position: absolute;
            top: 0;
            left: 0;
            opacity: 0;
            width: 64px;
            height: 64px;
            border-radius: 50%;
        }
    }
    .name {
        // width: auto;
        height: 13px;
        font-size: 13px;
        font-weight: 400;
        color: #666;
        line-height: 13px;
        margin-top: 15px;
    }
}
.form-box {
    width: 100%;
    margin-bottom: 50px;
    background-color: #fff;
    .tit {
        width: 100%;
        padding-left: 20px;
        font-size: 16px;
        font-weight: 600;
        color: #333;
        line-height: 16px;
        margin-bottom: 10px;
    }
    .group-item {
        width: 100%;
        height: 56px;
        display: flex;
        padding: 8px 20px;
        border-bottom: 1px solid #f3f6f9;
        .name {
            width: 150px;
            height: 40px;
            float: left;
            line-height: 40px;
            font-size: 16px;
            color: #333;
        }
        .value {
            flex: 1;
            height: 40px;
            text-align: right;
            font-size: 14px;
            color: #666;
            display: flex;
            align-items: center;
            justify-content: flex-end;
            span:nth-child(1) {
                flex: 1;
                height: 40px;
                text-align: right;
                font-size: 14px;
                color: #666;
                display: flex;
                align-items: center;
                justify-content: flex-end;
            }
            span:nth-child(2) {
                display: inline-block;
                font-size: 12px;
                margin-left: 15px;
            }
        }
    }
}
</style>
